<template>
    <div class="tophead">
        <img :src="avatar" :alt="nick">
        <span>
                        <strong>{{nick}}</strong>
                        <em><b>{{state}}</b><b v-if="combo>0">{{combo}}</b></em>
                    </span>
        <aside v-if="hitRate>0">
            <strong>{{hitRate}}</strong>
            <em>命中率</em>
            <i>%</i>
        </aside>
    </div>
</template>

<script>
    export default {
        name: 'Tophead',
        props: ['avatar', 'nick', 'state', 'combo', 'hitRate']
    }
</script>

<style scoped lang="less" rel="stylesheet/less">
    @import "../router/app.less";

    .tophead {
        display: flex;
        align-items: center;
        img {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            margin-right: 30px;
        }
        span {
            flex: 1;
            display: flex;
            flex-direction: column;
            strong {
                font-size: @fz30;
            }
            em {
                b {
                    .setnormalcss(26px);
                    box-sizing: border-box;
                    border-radius: 26px;
                    border: 1px solid @color22;
                    color: @color22;
                    padding: 0 14px;
                    margin-right: 10px;
                    display: inline-block;
                    font-size: @fz20;
                }
            }
        }
        aside {
            position: relative;
            display: flex;
            flex-direction: column;
            line-height: 1;
            strong {
                color: @color22;
                font-size: @fz48;
                font-weight: bolder;
                text-align: right;
                padding-right: 16px;
            }
            em {
                font-size: @fz20;
                color: @color3;
            }
            i {
                font-size: @fz36;
                transform: scale(.5);
                color: @color22;
                position: absolute;
                right: -10px;
                top: -10px;
            }
        }
    }

</style>
